<template>
  <el-dialog
    class="close-dialog"
    :title="dialog.title"
    width="900px"
    :visible.sync="dialog.visible"
    :append-to-body="true"
  >
    <div class="main">
      <el-table
        :data="roleList"
        highlight-current-row
        @current-change="handleCurrentChange"
        class="table"
      >
        <el-table-column label="客户编号" prop="customerNo" />
        <el-table-column
          label="客户名称"
          prop="customerName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="客户分类"
          prop="roleKey"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="客户状态" prop="state">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.customer_state"
              :value="scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column label="联系电话" prop="mobile" />
        <el-table-column label="登记人" prop="roleSort" />
        <el-table-column
          label="审批状态"
          prop="auditStatus"
          show-overflow-tooltip
        />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        class="pagination"
      />
    </div>
    <div class="foot">
      <el-button @click="submit" type="primary">确定</el-button>
      <el-button @click="cancle">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { customerlist } from "@/api/case/case";
export default {
  dicts: ["customer_state", "approval_status"],
  data() {
    return {
      dialog: {
        visible: false,
        title: "选择客户 ",
      },
      roleList: [],
      total: 0,

      currentRow: null,
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
      },
    };
  },
  methods: {
    //打开弹窗
    async open() {
      this.currentRow = null;
      this.getList();
      this.dialog.visible = true;
    },
    handleCurrentChange(row) {
      this.currentRow = row;
    },
    getList() {
      customerlist(this.queryParams).then((response) => {
        console.log(response);
        this.roleList = response.rows;
        this.total = response.total;
      });
    },
    //确定
    submit() {
      this.$emit("submit", this.currentRow);
      this.dialog.visible = false;
    },
    cancle() {
      this.dialog.visible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.close-dialog {
  .foot {
    text-align: center;
    margin-top: 20px;
  }
  .main {
    // justify-content: space-between;
    height: 100%;
    // flex-direction: column;
    // flex: 1;
  }
  .pagination {
    text-align: center;
  }
  .table {
    height: calc(100% - 60px);
    flex: 1;
  }
}
::v-deep .el-dialog__body {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 20px;
}
::v-deep .pagination-container .el-pagination {
  position: relative;
}
</style>
